﻿<h1>列表框 ListBox</h1>
<div class="section">
    <h2>示例</h2>
    <pre class="code">
//HTML
&lt;div id="lbTest">&lt;/div>

//JavaScript
var rbl = new ListBox(elem, option);
//elem: 'lbTest' 或 $('#lbTest')  控件id或对象。

//Option 选项可选配url和data初始化列表数据项
option = { 
    url: '', 
    data: [], 
    onClick: function (item) {} 
} 
</pre>
</div>
<div class="section">
    <h2>属性</h2>
    <table class="docTable">
        <tr>
            <th style="width:100px;">名称</th>
            <th style="width:100px;">类型</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>id</td>
            <td>String</td>
            <td>控件id。<span class="link" onclick="alert(lb.id)">取值</span></td>
        </tr>
        <tr>
            <td>selected</td>
            <td>Object</td>
            <td>选中的数据对象。<span class="link" onclick="alert(JSON.stringify(lb.selected))">取值</span></td>
        </tr>
    </table>
</div>
<div class="section">
    <h2>方法</h2>
    <div id="lbTest"></div>
    <script>
        var lb = new ListBox($('#lbTest'), {
            onClick: function (item) {
                alert(JSON.stringify(item));
            }
        });

        function setData() {
            lb.setData([
                { Code: 'test1', Name: '测试1', Data: { Type: 'test', Unit: 'U1' } },
                { Code: 'test2', Name: '测试2', Data: { Type: 'test', Unit: 'U2' } },
                { Code: 'test3', Name: '测试3', Data: { Type: 'test', Unit: 'U3' } }
            ]);
        }
    </script>
    <table class="docTable">
        <tr>
            <th style="width:100px;">名称</th>
            <th style="width:150px;">参数</th>
            <th style="width:100px;">返回值</th>
            <th>描述</th>
            <th>示例</th>
        </tr>
        <tr>
            <td>setData</td>
            <td>data: Array</td>
            <td></td>
            <td>设置列表数据项。数据支持如下类型：<br />1.代码表数组；<br />2.简单数组；<br />3.客户端缓存代码类别。</td>
            <td>
                <pre>
lb.setData([
    { Code: 'test1', Name: '测试1', Data: { Type: 'test', Unit: 'U1' } },
    { Code: 'test2', Name: '测试2', Data: { Type: 'test', Unit: 'U2' } },
    { Code: 'test3', Name: '测试3', Data: { Type: 'test', Unit: 'U3' } }
]);

lb.setData(['项1','项2','项3','项4','项5']);
</pre>
                <span class="link" onclick="setData()">测试1</span>
                <span class="link" onclick="lb.setData(['项1','项2','项3','项4','项5'])">测试2</span>
            </td>
        </tr>
    </table>
</div>